<template>
    <el-container v-loading="loading">
        <!-- 宽度自适应 -->
        <el-aside width="auto">
            <!-- 侧边栏 -->
            <Aside/>
        </el-aside>
        <el-container>
            <!-- 导航头 -->
            <el-header>
                <Header/>
            </el-header>
            <!-- 面包屑 -->
            <TabBread/>
            <!-- 主体部分 -->
            <el-main>
                <!-- 具体展示哪块内容 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Aside from '@/components/Aside';
    import Header from '@/components/Header';
    import TabBread from '@/components/TabBread'
    export default {
        name:'Home',
        components:{
            Aside,
            Header,
            TabBread
        },
        data() {
            return {
                // 加载模式
                loading:false
            }
        },
        methods:{
            // 更改loading值的回调
            updateLoading(value){
                this.loading = value;
            }
        },
        mounted(){
            this.$bus.$on('updateLoading',this.updateLoading)
        },
        beforeDestroy(){
            this.$bus.$off('updateLoading');
        },
    }
</script>

<style lang="less" scoped>

    .el-container {
        height: 100vh;
    }

    .el-header {
        background-color: #3a6587;
    }
    
    .el-main {
        background-color: #E9EEF3;
    }
  
</style>